<template>
    <el-dialog class="option-dialog" width="55%" :visible="visible" :before-close="handleClose">

        <div class="toolbar" slot="title">
            <el-select v-model="activeOptionName" class="option-select" size="mini" value=""
                       @change="handleSelectChange">
                <el-option v-for="(item,index) in Object.keys(options)" :key="index"
                           :label="item" :value="item">
                </el-option>
            </el-select>
            <iconfont class="option-btn" icon="icon-tianjia" title="添加" @click="addOptionClick"></iconfont>
            <iconfont class="option-btn" icon="icon-fuzhi" title="克隆" @click="cloneOptionClick"></iconfont>
            <iconfont class="option-btn" icon="icon-shanchu" title="移除" @click="removeOptionClick"></iconfont>
        </div>

        <el-form ref="optionForm" v-if="option" :model="option" label-width="80px">
            <el-form-item label="监听路径" size="mini">
                <div class="upload">
                    <el-input v-model="option.path" size="mini" readonly></el-input>
                    <video-auto-move-find-dir @change="handleUploadChange"></video-auto-move-find-dir>
                </div>
            </el-form-item>
            <el-form-item label="目标路径" size="mini">
                <div class="upload">
                    <el-input v-model="option.target" size="mini" readonly></el-input>
                    <video-auto-move-find-dir @change="handleTargetUploadChange"></video-auto-move-find-dir>
                </div>
            </el-form-item>
            <dynamic-input label="扩展名" v-model="option.exts"></dynamic-input>
        </el-form>

        <div slot="footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="success" :loading="saveLoading" @click="saveClick">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script type="text/ecmascript-6">
    import {R, Key} from "../r";
    import DynamicInput from "../common/DynamicInput";
    import Iconfont from "../common/Iconfont";
    import VideoAutoMoveFindDir from "./OptionUploadFindDir";

    /**
     * @author 白雨浓
     * @date 2018/9/27 17:29
     *
     * 文件移动配置
     **/
    export default {
        name: 'VideoAutoMoveOptionDialog',
        components: {VideoAutoMoveFindDir, Iconfont, DynamicInput},
        props: ['value', 'type'],
        data() {
            return {
                visible: this.value,
                saveLoading: false,
                options: {},
                activeOptionName: '',
                option: null,
            }
        },
        computed: {
            title() {
                return this.type === R.dialog.ADD ? '添加配置' : '编辑配置';
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.loadOptions();
            })
        },
        methods: {
            loadOptions() {
                const options = this.$storage.local.getItem(Key.local.VIDEO_AUTO_MOVE_OPTION);
                if (options) {
                    this.options = options;
                }
                const activeOptionName = this.$storage.local.getItem(Key.local.VIDEO_AUTO_MOVE_ACTIVE_NAME);
                if (activeOptionName) {
                    this.activeOptionName = activeOptionName;
                }

                if (options && activeOptionName) {
                    this.option = options[activeOptionName]
                }
            },
            saveClick() {
                this.saveLoading = true;
                this.options[this.activeOptionName] = this.option;
                this.$storage.local.setItem(Key.local.VIDEO_AUTO_MOVE_OPTION, this.options);
                this.$storage.local.setItem(Key.local.VIDEO_AUTO_MOVE_ACTIVE_NAME, this.activeOptionName);
                this.handleClose();
                this.$emit('save');
            },
            async addOptionClick() {
                const {value} = await this.$prompt('请输入名称', '新建配置');
                this.option = {
                    path: '',
                    target: '',
                    exts: []
                };
                this.activeOptionName = value;
                this.options[this.activeOptionName] = this.option;
            },
            async cloneOptionClick() {
                const {value} = await this.$prompt('请输入名称', '克隆配置');
                this.options[value] = this.$clone.simple(this.option);
                this.activeOptionName = value;
            },
            async removeOptionClick() {
                await this.$confirm('是否删除?', '提示', {type: 'warning'});
                delete this.options[this.activeOptionName];
                if (Object.keys(this.options).length > 0) {
                    const firstName = Object.keys(this.options)[0];
                    this.option = this.options[firstName];
                    this.activeOptionName = firstName;
                }
            },
            handleSelectChange() {
                this.option = this.options[this.activeOptionName]
            },
            handleUploadChange(evt) {
                const file = evt.target.files[0];
                this.option.path = file.path;
            },
            handleTargetUploadChange(evt) {
                const file = evt.target.files[0];
                this.option.target = file.path;
            },
            /** 关闭处理 */
            handleClose() {
                this.saveLoading = false;
                this.visible = false;
                setTimeout(() => this.$emit('input', false), 300);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .option-dialog {
    }

    .toolbar {
        display flex
        align-items center
    }

    .option-select {
        width 100px
    }

    .option-btn {
        cursor pointer
        margin-left 5px
        color #555
        font-size 2ex

        &:hover {
            color #3a8ee6
        }
    }

    .upload {
        display flex
    }

</style>
